<template>
  <div class="app-container">
    <Row>
      <Col :sm="24" :md="24" :lg="24">
        <div class="con">
          <Button type="success" style="margin-left: 10px" @click="in_storage = true">打开看板</Button>
        </div>

        <!-- <Card title="计划配置" style="width: 700px">
          <template #extra>
            <Button type="success" style="margin-left: 10px" @click="submit">保存配置</Button>
          </template>
          <div style="font-weight: 700">
            <span style="margin-left: 100px">型号</span>
            <span style="margin-left: 100px">计划数</span>
            <span style="margin-left: 80px">穴数</span>
            <span style="margin-left: 80px">标准节拍</span>
          </div>
          <Form :model="form">
            <FormItem label="组装1">
              <Input v-model="form.Xh1" size="small" style="width: 120px" />
              <Input v-model="form.P1" size="small" style="width: 120px" />
              <Input v-model="form.Xs1" size="small" style="width: 120px" />
              <Input v-model="form.bzjp1" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P1')">换线</Button>
            </FormItem>
            <FormItem label="组装2">
              <Input v-model="form.Xh2" size="small" style="width: 120px" />
              <Input v-model="form.P2" size="small" style="width: 120px" />
              <Input v-model="form.Xs2" size="small" style="width: 120px" />
              <Input v-model="form.bzjp2" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P2')">换线</Button>
            </FormItem>
            <FormItem label="组装3">
              <Input v-model="form.Xh3" size="small" style="width: 120px" />
              <Input v-model="form.P3" size="small" style="width: 120px" />
              <Input v-model="form.Xs3" size="small" style="width: 120px" />
              <Input v-model="form.bzjp3" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P3')">换线</Button>
            </FormItem>
            <FormItem label="组装4">
              <Input v-model="form.Xh4" size="small" style="width: 120px" />
              <Input v-model="form.P4" size="small" style="width: 120px" />
              <Input v-model="form.Xs4" size="small" style="width: 120px" />
              <Input v-model="form.bzjp4" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P4')">换线</Button>
            </FormItem>
            <FormItem label="组装5">
              <Input v-model="form.Xh5" size="small" style="width: 120px" />
              <Input v-model="form.P5" size="small" style="width: 120px" />
              <Input v-model="form.Xs5" size="small" style="width: 120px" />
              <Input v-model="form.bzjp5" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P5')">换线</Button>
            </FormItem>
            <FormItem label="打胶1">
              <Input v-model="form.Xh6" size="small" style="width: 120px" />
              <Input v-model="form.P6" size="small" style="width: 120px" />
              <Input v-model="form.Xs6" size="small" style="width: 120px" />
              <Input v-model="form.bzjp6" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P6')">换线</Button>
            </FormItem>
          </Form>
        </Card> -->
      </Col>
    </Row>
    <Modal v-model="in_storage" fullscreen :mask-closable="false" footer-hide>
      <transition name="el-zoom-in-center" mode="out-in">
        <div v-if="showImg === 0" key="board" style="padding: 30px">
          <div style="text-align: center" class="head">
            <h1 style="color: #fff; font-weight: bold; font-size: 4rem; letter-spacing: 15px; padding-top: 15px">COLMO高端生产线产能看板</h1>
            <h1 style="color: crimson; font-weight: bold; font-size: 2.5rem; letter-spacing: 10px; margin-top: 10px">
              衡德塑料加工工业互联网智造云平台
            </h1>
            <div class="time">
              {{ date }}
            </div>
          </div>
          <div class="content">
            <table>
              <tr>
                <th style="width: 20rem">线别</th>
                <th style="width: 15rem">型号</th>
                <th style="width: 18rem">计划数</th>
                <th style="width: 15rem">标准节拍</th>
                <th style="width: 15rem">生产数</th>
                <th style="width: 15rem">实际节拍</th>
                <th style="width: 8rem">&nbsp;</th>
                <th style="width: 15rem">状态</th>
              </tr>
              <tr v-for="(o, i) in data" :key="i">
                <td>
                  <div class="barbox" style="padding-right: 0px; color: #ffeb7b">
                    <div>{{ o[0] }}</div>
                  </div>
                </td>
                <td>
                  <div class="barbox">
                    <span class="count">{{ o[1] }}</span>
                  </div>
                </td>
                <td>
                  <div class="barbox">
                    <span class="count">{{ o[2] }}</span>
                  </div>
                </td>
                <td>
                  <div class="barbox">
                    <span class="count">{{ o[3] }}</span>
                  </div>
                </td>
                <td>
                  <div class="barbox">
                    <span class="count">{{ o[4] }}</span>
                  </div>
                </td>
                <td>
                  <div class="barbox">
                    <span class="count">{{ parseFloat(o[5]).toFixed(1) }}</span>
                  </div>
                </td>
                <td style="padding-left: 0px">S</td>
                <td>
                  <div class="barbox" style="padding-right: 0px">
                    <div :style="'color:' + color[o[6]]">{{ sta[o[6]] }}</div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <div style="display: flex; margin-top: 20px">
            <v-chart :options="option1" style="width: 920px; height: 360px; display: flex; justify-content: center" />
            <v-chart :options="option2" style="width: 920px; height: 360px; display: flex; justify-content: center" />
          </div>
        </div>
        <div v-if="showImg === 1" key="img" style="height: 100%">
          <div
            style="
              font-size: 120px;
              background: ghostwhite;
              font-family: monospace;
              font-weight: 700;
              height: 100%;
              text-align: center;
              padding-top: 250px;
              color: #2088d1;
              letter-spacing: 25px;
            ">
            <font style="letter-spacing: 50px; font-size: 150pt">COLMO</font>
            <br />
            <font style="letter-spacing: normal; font-size: 120pt">产品专线</font>
          </div>
        </div>
        <div v-if="showImg === 2" key="img" style="height: 100%">
          <!-- <img style="height: calc(100% - 7px); width: 100%" src="../../../assets/images/colmo.png" /> -->
          <video
            ref="videoPlayer"
            id="videoPlayer"
            class="video"
            style="height: calc(100% - 7px); width: 100%"
            autoplay
            muted
            src="../../../assets/images/COLMO.mp4"></video>
        </div>
      </transition>
    </Modal>
  </div>
</template>

<script>
import BoardService from '@/api/board/board'
import moment from 'moment'

function getOption() {
  const start = moment().startOf('month').add(-1, 'day')
  const defaultData = new Array(moment().daysInMonth()).fill().map(() => {
    return { colmoJlrq: start.add(1, 'day').format('YYYY-MM-DD'), colmoSl: 0 }
  })
  return {
    title: {
      text: '型号：94043 月产能',
      bottom: 0,
      left: 'center',
      textStyle: {
        fontSize: 32,
        color: '#fff',
      },
    },
    grid: {
      left: 70,
      right: 50,
      bottom: 80,
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        fontSize: 30,
        color: '#fff',
        formatter: (v) => {
          return moment(v).format('DD')
        },
        // interval: 0,
      },
      //min: moment().startOf('month').valueOf(),
      //max: moment().endOf('month').valueOf(),
      // boundaryGap: [moment().startOf('month').valueOf(), moment().endOf('month').valueOf()],
      //boundaryGap: ['20%', '100%'],
      //interval: 3600 * 24 * 1000,
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          fontSize: 30,
          color: '#fff',
        },
      },
      axisLine: {
        lineStyle: {
          fontSize: 30,
          color: '#fff',
        },
      },
    },
    yAxis: {
      name: '产能',
      nameTextStyle: {
        fontSize: 30,
        color: '#fff',
      },
      axisLabel: {
        fontSize: 30,
        color: '#fff',
      },
      axisTick: {
        lineStyle: {
          fontSize: 30,
          color: '#fff',
        },
      },
      axisLine: {
        lineStyle: {
          fontSize: 30,
          color: '#fff',
        },
      },
      type: 'value',
    },
    dataset: {
      source: defaultData,
    },
    series: [
      {
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          fontSize: 18,
          color: '#fff',
        },
        dimensions: [{ name: 'colmoJlrq', type: 'ordinal' }, 'colmoSl'],
        barCategoryGap: '50%',
      },
    ],
  }
}
export default {
  name: 'colmo',
  data() {
    return {
      in_storage: true,
      date: this.$moment().format(),
      form: {},
      data: [['G高端线A', '---', '---', '---', '---', '---', 0]],
      monthData: [],
      color: ['red', '#00ff00', 'red', 'white'],
      sta: ['异常', '生产', '暂停', '暂停'],
      showImg: 0,
      option1: getOption(),
      option2: getOption(),
    }
  },
  created() {},
  methods: {
    parseFloat(a) {
      return parseFloat(a)
    },
    getInfo() {
      //查询物料信息
      BoardService.getColmoView().then((res) => {
        if (res.data.length > 0)
          this.data = res.data.map((o, i) => {
            return [
              o.moe_jtbh,
              o.itm_custwldm.slice(-5),
              o.moe_scsl,
              o.moe_cxsj,
              o.moe_lpsl,
              o.moe_sjjp > 120 ? 'Na' : o.moe_sjjp,
              parseInt(o.moe_ztbz),
            ]
          })
        res.monthData.slice(0, 2).forEach((e, i) => {
          this['option' + ++i].title.text = `型号：${e.colmoCustwldm.slice(-5)} 月产能`
          e.data.forEach((o) => {
            const cur = this['option' + i].dataset.source.filter((x) => x.colmoJlrq === o.colmoJlrq)
            if (cur[0]) cur[0].colmoSl = o.colmoSl
          })
        })
      })
    },
  },
  mounted() {
    // this.in_storage = true;
    this.getInfo()
    if (this.taskDate) clearInterval(this.taskDate)
    this.taskDate = setInterval(() => {
      this.date = this.$moment().format()
    }, 1000)

    if (this.task60) clearInterval(this.task60)
    this.task60 = setInterval(() => {
      this.getInfo()
      this.showImg = 0
      setTimeout(() => {
        this.showImg = 1
        setTimeout(() => {
          this.showImg = 2
          setTimeout(() => {
            this.showImg = 1
          }, 10000)
        }, 3000)
      }, 20000)
    }, 36000)
  },
}
</script>

<style scoped lang="less">
@font-face {
  font-family: 'electronicFont';
  src: url('../../../assets/font/DS-DIGIT.TTF');
}
// @font-face {
//   font-family: 'electronicFont';
//   src: url('/hd-api/static/font/DS-DIGIT.TTF');
// }

.v-transfer-dom {
  /deep/ .ivu-modal-fullscreen .ivu-modal-content {
    background: #000d4a url('../../../assets/images/bg.jpg') center center;
    background-size: cover;
    color: #666;
    font-size: 1rem;
    .head {
      height: 10rem;
      background: url('../../../assets/images/head_bg.png') no-repeat center center;
      background-size: 100% 100%;
      position: relative;
    }
    .ivu-modal-body {
      padding: 0;
    }
  }
}
.barbox {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
  text-align: right;
  padding-right: 1rem;
  &:before {
    border-left: 2px solid #02a6b5;
    left: 0;
    border-top: 2px solid #02a6b5;
  }
  &:after {
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #02a6b5;
  }
  &:before,
  &:after {
    position: absolute;
    width: 3rem;
    height: 1rem;
    content: '';
  }
  div,
  span {
    font-size: 2.5rem;
    line-height: 5rem;
    text-align: center;
    font-weight: 700;
  }
  .count {
    color: #ffeb7b;
    font-size: 5rem;
    padding: 0.5rem 0;
    font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
    font-weight: bold;
    font-family: electronicFont;
    max-width: 10rem;
  }
}
.time {
  position: absolute;
  right: 1rem;
  top: 2.5rem;
  line-height: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.6rem;
  padding-right: 1rem;
  font-family: electronicFont;
}
.content {
  display: flex;
  justify-content: center;
  table {
    font-size: 2.5rem;
    color: white;
    td {
      padding: 1.5rem;
    }
  }
}
.rkpb {
  margin: 10px 0px 0px 20px;

  table {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    line-height: 32px;
    font-size: 18px;

    td,
    th {
      border: 1px solid black;
    }
  }
}
.el-zoom-in-center-enter-active {
  transition: all 0.5s ease;
}
.el-zoom-in-center-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
</style>
